<template>
  <div>
    <el-form>
      <el-form-item label="SPU名称">
        {{row.spuName}}
      </el-form-item>
      <el-form-item label="SKU名称">
        <el-input placeholder="SKU名称" v-model="skuInfo.skuName"></el-input>
      </el-form-item>
      <el-form-item label="价格(元)">
        <el-input placeholder="价格(元)" type="number" v-model="skuInfo.price"></el-input>
      </el-form-item>
      <el-form-item label="重量(千克)">
        <el-input placeholder="重量(千克)" type="number" v-model="skuInfo.weight"></el-input>
      </el-form-item>
      <el-form-item label="规格描述">
        <el-input type="textarea" rows="4" v-model="skuInfo.skuDesc"></el-input>
      </el-form-item>
      <el-form-item label="平台属性">
        <el-form :inline="true" label-width="80px">
          <el-form-item :label="attr.attrName" v-for="(attr,index) in attrInfoList" :key="attr.id">
            <el-select placeholder="请选择" v-model="attr.attrIdAndValueId">
              <el-option :label="attrValue.valueName" :value="`${attr.id}:${attrValue.id}`" v-for="(attrValue,index) in attr.attrValueList" :key="attrValue.id"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>
      <el-form-item label="销售属性">
       <el-form :inline="true" label-width="80px">
         <el-form-item :label="SaleAttr.saleAttrName" v-for="(SaleAttr,index) in spuSaleAttrList" :key="SaleAttr.id">
            <el-select placeholder="请选择" v-model="SaleAttr.attrIdAndValueId">
              <el-option :label="saleAttrValue.saleAttrValueName" :value="`${SaleAttr.id}:${saleAttrValue.id}`" v-for="(saleAttrValue,index) in SaleAttr.spuSaleAttrValueList" :key="saleAttrValue.id"></el-option>
            </el-select>
          </el-form-item>
       </el-form>
      </el-form-item>
      <el-form-item label="图片列表">
        <el-table style="width:100%" border :data="spuImageList" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="80">
          </el-table-column>
          <el-table-column prop="" label="图片" width="width">
            <!-- 作用域插槽 -->
            <template slot-scope="{row,$index}">
              <img :src="row.imgUrl" alt="" style="width:100px;height:100px">
            </template>
          </el-table-column>
          <el-table-column prop="imgName" label="名称" width="width">
          </el-table-column>
          <el-table-column  label="操作" width="width">
            <template slot-scope="{row,$index}">
              <el-button type="primary" v-if="row.isDefault==0" @click="changeDefault(row)">设置默认</el-button>
              <el-button v-else>默认</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="save">保存</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  export default {
    name: '',
    data() {
      return {
        //存放图片列表数据
        spuImageList:[],
        //存放销售属性的数据
        spuSaleAttrList:[],
        //存放平台属性的数据
        attrInfoList:[],
        //收集sku数据的字段
        skuInfo:{
          //第一类收集的数据(父组件给的数据)
          category3Id:0,//三级分类的id
          spuId:0, //spu的id
          tmId:0,  //品牌的id
          //第二类收集的数据(数据的双向数据绑定)
          price:0,
          //平台属性
          skuAttrValueList:[],
          //收集图片的数组字段
          skuImageList:[],
          //销售属性
          skuSaleAttrValueList:[],
          //设置的默认图片
          skuDefaultImg:"",
          skuDesc:"",
          skuName:"",
          weight:"",
        },
        //存放spu的类
        row:{},
        //收集图片的数据字段
        imageList:[],



      }
    },
    methods:{
      //子组件中获取数据的三个请求
      async getData(category1Id,category2Id,row){
        //收集父组件给予的数据
        this.skuInfo.category3Id=row.category3Id;
        this.skuInfo.spuId=row.id;
        this.skuInfo.tmId=row.tmId;
        this.row=row;
        //1.获取图片的数据
        const result1=await this.$API.sku.reqSpuImageList(row.id);
        if(result1.code==200){
          // this.spuImageList=result1.data;
          //为图片数组增加isDefault字段，默认为0
          let list=result1.data;
          list.forEach((item)=>{
            item.isDefault=0;
          })
          this.spuImageList=list;
        }
        //2.获取销售属性的数据
        const result2=await this.$API.sku.reqSpuSaleAttrList(row.id);
        if(result2.code==200){
          this.spuSaleAttrList=result2.data;
        }
        //3.获取平台属性的数据
        const result3=await this.$API.sku.reqAttrInfoList(category1Id,category2Id,row.category3Id);
        if(result3.code==200){
          this.attrInfoList=result3.data;
        }

      },
      //表格的选中项发生变化时触发的事件
      handleSelectionChange(params){
        //多选表格选中的项
        console.log(params);
        //将多选表格选中的图片信息收集起来,但是此时收集的图片数组元素中缺少isDefault字段
        this.imageList=params;
      },
      //点击设置默认时触发的事件
      changeDefault(row){
        //点击设置默认按钮时，将宣布的isDefault设置为0
        this.spuImageList.forEach((item)=>{
          item.isDefault=0;
        });
        //将点击设置默认的那一个isDefault设置为1
        row.isDefault=1;
        //收集默认图片的地址
        this.skuInfo.skuDefaultImg=row.imgUrl;

      },
      //点击取消按钮通知父组件切换场景为0
      cancel(){
        this.$emit('changeScene',0);
        //切换场景为0之后清除表单数据
        Object.assign(this._data,this.$options.data())
      },
      //点击保存按钮触发的事件
      async save(){
        //需要整理的参数(平台属性，销售属性，图片列表)
        //平台属性
        const {attrInfoList,spuSaleAttrList,imageList,skuInfo}=this;

        skuInfo.skuAttrValueList=attrInfoList.reduce((prev,item)=>{
          if(item.attrIdAndValueId){
            const [attrId,valueId]=item.attrIdAndValueId.split(":");
            prev.push({attrId,valueId});
          }
          return prev;
        },[]);
        //销售属性
        skuInfo.skuSaleAttrValueList=spuSaleAttrList.reduce((prev,item)=>{
          if(item.attrIdAndValueId){
            const [saleAttrId,saleAttrValueId]=item.attrIdAndValueId.split(":");
            prev.push({saleAttrId,saleAttrValueId})
          }
          return prev;
        },[])
        //图片列表 映射为一个新的数组
        skuInfo.skuImageList=imageList.map((item)=>{
          return{
            imgName:item.imgName,
            imgUrl:item.imgUrl,
            isDefault:item.isDefault,
            spuImgId:item.id,
          }
        })
        //正式保存发起请求
        const result=await this.$API.sku.reqAddSku(skuInfo);
        console.log(result,"保存");
        if(result.code==200){
          this.$message.success("保存成功");
          //切换场景为0的页面
          this.$emit('changeScene',0);
        }





      }
    }
  }

</script>
<style scoped>

</style>
